<!--
 * @Author: 袁十一
 * @Date: 2023-02-07 02:07:21
 * @LastEditTime: 2023-03-16 09:08:10
 * @LastEditors: 袁十一
 * @Description: 登陆页面
 * @FilePath: \blog\src\views\LoginView.vue
 * 初心不变，意志坚定
-->
<template>
  <el-container>
    <div class="login">
      <h2>Login</h2>
      <div class="lb">
        <label for="">账号:&nbsp;</label>
      </div>
      <el-input type="text" />
      <div class="lb">
        <label for="" style="color: #fff">密码:&nbsp;</label>
      </div>
      <el-input type="password" />
      <div class="btn">
        <a href="">忘记密码</a>
        <el-button>登录</el-button>
        <el-button>注册</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
</script>

<style scoped>
.login {
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  margin: 120px auto;
  border-radius: 8px;
  padding: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}
.login .lb {
  color: #fff;
  text-align: left;
  line-height: 1em;
}
.login h2 {
  color: #fff;
  font-size: 40px;
  margin: 20px auto;
}
.el-input {
  margin: 10px auto;
}
.login .btn a {
  color: #fff;
  display: block;
  line-height: 2em;
}
.login .btn a:hover {
  color: #57d0ff;
}
</style>
